<html> 
    <head> 
        <title></title> 
        <link rel="stylesheet" type="text/css" href="css/present.css" /> 
<script type="text/javascript">
$(function() {
   $(".hide").hide();
   sub = { index:0, steps: [], step: function() {sub.steps[sub.index++]();}};
   sub.next= function () { return sub.index >= sub.steps.length };
   sub.steps.push(function() {$(".step0a").show();});
   sub.steps.push(function() {$(".step0a").hide();$(".step0").show();});
   sub.steps.push(function() {$(".step1").show();});
   sub.steps.push(function() {$(".step2").show();});
   sub.steps.push(function() {$(".step1").animate({'height': 0}, 1000, function() { $(this).hide();}); $(".step3").show();});
   sub.steps.push(function() {$(".step3a").animate({'height': 0}, 1000, function() { $(this).hide();}); $(".step3b").show();});
   sub.steps.push(function() {$(".step3b").animate({'height': 0}, 1000, function() { $(this).hide();}); $(".step3c").show();});
   sub.steps.push(function() {
       timers.defaultRender = function(settings) {
          $('.step5 svg').replaceWith(evalPath(settings.digest));
       }
       timers.queue({url: '../../animation/heart.jsvg'
                     , endTime: 10000
                     , render: function(settings) {evalPath(settings.digest);$('path#heart').attr("d", heart.path.dPath(3))}
                     , timePoints: JSON.parse('{"heart.size" : " 0: 50, 400: 60, 600: 56, 1000: 50"}')
                     , init: function(settings) { timers.defaultRender(settings) }});
       timers.queue({url: '../../animation/twee.jsvg'
                     , endTime: 10000
                     , render: function(settings) {evalPath(settings.digest);$('path#char').attr("d", twee.chars.dPath(3))}
                     , timePoints: JSON.parse('{"twee.skew" : " 2000: 0, 3000: 1, 4000: 1.5, 5000: 1.76, 5300: 1.8, 5400: 1.6, 5500: 1.86, 5900: -1.7, 6300: 1.5, 6700: -1.1, 7100: 0.7, 7500: -0.5, 8000: 0.2", "twee.y" : "0: -20, 2000: 100, 10000: 100", "twee.x" : "8000: 0, 10000: -500"}')
                     , init: function(settings) { timers.defaultRender(settings) }});

       timers.queue({url: '../../animation/drie.jsvg'
                     , endTime: 10000
                     , render: function(settings) {evalPath(settings.digest);$('path#char').attr("d", drie.chars.dPath(3))}
                     , timePoints: JSON.parse('{"drie.slide" : "0: 40, 10000: -600"}')
                     , init: function(settings) { timers.defaultRender(settings) }});
       timers.startOver = true;
       $(".step2, .step0, .step3, .step4")
       .animate({'height': 0}, 1000, function() { 
            $(this).hide();}); $(".step5").show();
       timers.nextSlide(80);
   });
   sub.steps.push(function() { timers.stop(); });
   sub.steps.pop();
   sub.steps.pop();
});
</script>

    </head> 
<body class="jsxgraph_body"> 
<ul> 
<li class="step0">Create functions for often repeating patterns</li>
<li class="step0a hide">
<div>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="210"  width="630" baseProfile="full" viewbox="0 0 1400 500"> 
    <g stroke="black" stroke-width="1" fill="none" transform="scale(5)">
<path id="loop1" d="M10 20 l 0 68 245 0 0 -68 -25 0 0 -18 -15 0 0 18 -15 0 0 -18 -15 0 0 18 -15 0 0 -18 -15 0 0 18 -15 0 0 -18 -15 0 0 18 -15 0 0 -18 -15 0 0 18 -15 0 0 -18 -15 0 0 18 -15 0 0 -18 -15 0 0 18 -25 0 m 25 25 l 15 0 0 18 -15 0 0 -18 m 30 0 l 15 0 0 18 -15 0 0 -18 m 30 0 l 15 0 0 18 -15 0 0 -18 m 30 0 l 15 0 0 18 -15 0 0 -18 m 30 0 l 15 0 0 18 -15 0 0 -18 m 30 0 l 15 0 0 18 -15 0 0 -18 m 30 0 l 15 0 0 18 -15 0 0 -18"></path>
    </g>
  </svg>
<pre class="smallcode">
<span class="param">path</span> = new iPath().line(0,50+<span class="param">height</span>).line((2*<span class="param">pens</span>-1)*<span class="param">width</span> + 50,0)
   .line(0, -1*(50+<span class="param">height</span>)).line(-25,0)
   .concat(new iPath().<span class="focus">pensEdge</span>(<span class="param">width</span>, <span class="param">height</span>, <span class="param">pens</span>)
     .reflect({x:1}).reflect({y:1}))
   .line(-25,0)
   .move(25, 25)
   .concat(new iPath().<span class="focus">squareHole</span>(<span class="param">height</span>, <span class="param">width</span>).<span class="focus">repeat</span>(<span class="param">pens</span>));
</pre>
</div>
</li>
<li class="step0 hide">Embed your calculation inside your template<div class="step1 hide"><p><img src="images/calculator.png" height="200"></p></div></li>
<li class="step2 hide">Allow customization and immediate online display</li>
<li class="step3 hide">Input for 2D cnc devices like cnc routers or laser/water cutters<div class="step3a"><p><img src="images/shopbot.jpg" height="200"></p></div><br>
<li class="step3c hide">Third demo: <a href="http://localhost/iscriptdesign" target="_blank">iscriptdesign</a></li>
<div class="step3b hide">
<svg version="1.1" viewBox="0 120 800 400"><g stroke="red" stroke-width="0.8" fill="none" transform="scale(1.2)"><path id="loop1" d="M 190 200 l 20 0 0 35 20 0 0 5 7 -5 -7 -5 0 5 m -20 -35 l 20 0 0 5 7 -5 -7 -5 0 5 m -20 0 l 0 -35 20 0 0 5 7 -5 -7 -5 0 5"></path> </g><g stroke="blue" stroke-width="0.8" fill="none" transform="scale(1.2)"><text x="20" y="207" font-family="Verdana" font-size="15" fill="blue"> path = new iPath().. </text><text x="250" y="172" font-family="Verdana" font-size="15" fill="blue"> svg: &amp;lt;path d=&quot;path.dPath():.. </text><text x="250" y="207" font-family="Verdana" font-size="15" fill="blue"> dxf: path.dxf(...) </text><text x="250" y="242" font-family="Verdana" font-size="15" fill="blue"> path.pdf(..), path.eps(..), path.sew(..), path.gCode(..), path...??? </text></g></svg>
</li>
<li class="step5 hide step5">Animate
<svg version="1.1" width="1310" height="600"></svg>
</li>
</li>
</ul>
</body>
</html>
